<script setup lang="ts">
import { ref } from 'vue'
import CodeBlock from "./CodeBlock.vue"
import {Toast} from 'vant'

interface Row{
  id:string | number,
  describe:string,
  code:string,
  path:string,
  name:string,
  lang:string,
  table:string
}
defineProps<{ data: Row }>()

function show_path(path:string){
    Toast(path)
}

function send_code(data:Row){
    let id = data.id;
    let path = data.path; // path已经足够了吧
    let table = data.table
    let param = {id,path,table}
    console.log(param)
}


const count = ref(0)
</script>

<template>

<div class="code-block">
  <p class="name" @click="show_path(data.path)" :data-path="data.path">{{data.name}}@{{data.id}}</p>
  <p class="describe" >{{data.describe}}</p>
  <div class="code"  @click="send_code(data)">
    <code-block :autodetect="true" :code="data.code" />
  </div>
 </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.code-block p{
  margin:5px 0;
  text-align: left;
}
.code-block .name{
  background:darkslateblue;
  color:white;
}
.code-block .describe{
  background: bisque;
}
.code-block .code{
}
</style>
